<template>
	<div>
		<el-form ref="form" :model="form" :rules="formRules" label-width="130px" :zIndex="999">
			<el-tabs v-model="activeName">
				<el-tab-pane label="基础信息" name="first">
					<div class="bgfff pad20">
						<el-form-item label="名称" prop="gasOutletName">
							<el-input v-model="form.gasOutletName" style="width: 250px;"></el-input>
						</el-form-item>
						<el-form-item label="序号" prop="gasOutletNo">
							<el-input v-model="form.gasOutletNo" style="width: 250px;"></el-input>
						</el-form-item>
						<el-form-item label="启用时间" prop="useDate">
							<el-date-picker v-model="form.useDate" type="date" placeholder="启用时间" value-format="yyyy-MM-dd"
								style="width: 250px;">
							</el-date-picker>
						</el-form-item>

						<!-- <el-form-item label="排放DCS" prop="outletMn">
							<el-input v-model="form.outletMn" style="width: 250px;"></el-input>
						</el-form-item>
						<el-form-item label="排放参数" prop="outletCode" v-if="form.outletMn">
							<el-select v-if="" v-model="form.outletCode" filterable @focus="getEachDscRunList()"
								prop="outletCode" style="width: 250px;">
								<el-option v-for="(item1,index1) in dcsAllRunList" :label="item1.name" :value="item1.code" />
							</el-select>
						</el-form-item>

						<el-form-item label="排放标准值" prop="outletStd">
							<el-input v-model="form.outletStd" style="width: 250px;" type="number"></el-input>
						</el-form-item> -->
						<el-form-item label="排放方式" prop="gasOutletApproach">
							<el-radio v-model="form.gasOutletApproach" label="ORGANIZED_OUTLET">有组织排放</el-radio>
							<el-radio v-model="form.gasOutletApproach" label="DISORGANIZED_OUTLET">无组织排放</el-radio>
						</el-form-item>
						
						<el-form-item label="排放时间关联" prop="outletInstallationId">
							<el-select placeholder="排放时间关联" v-model="form.outletInstallationId" style="width: 250px;">
								<el-option v-for="(item,index) in dataList" :key="index" :label="item.defenceName" :value="item.id" />
							</el-select>
						</el-form-item>

						<div style="text-align: center;">
							<!-- <el-button v-if="editData && editData.id" type="danger" @click="deleteThis">删除</el-button> -->
							<el-button type="primary" @click="saveOrUpdate">保存</el-button>
						</div>
					</div>
				</el-tab-pane>

				<el-tab-pane label="烟筒" name="eight">
					<div class="bgfff pad20">
						<el-form-item label="烟筒高度" prop="gasOutletHeight">
							<el-input v-model="form4.gasOutletHeight" style="width: 250px;"></el-input>
							<span class="ml10">米</span>
						</el-form-item>
						<el-form-item label="烟筒温度" prop="gasOutletTemperature">
							<el-input v-model="form4.gasOutletTemperature" style="width: 250px;"></el-input>
							<span class="ml10">摄氏度</span>
						</el-form-item>
						<el-form-item label="烟气压力" prop="gasOutletPressure">
							<el-input v-model="form4.gasOutletPressure" style="width: 250px;"></el-input>
							<span class="ml10">kPa</span>
						</el-form-item>
						<el-form-item label="烟气量" prop="defaultSmokeVolume">
							<el-input v-model="form4.defaultSmokeVolume" style="width: 250px;"></el-input>
							<span class="ml10">m³/h</span>
						</el-form-item>
						<div style="text-align: center;">
							<!-- <el-button v-if="editData && editData.id" type="danger" @click="deleteThis">删除</el-button> -->
							<el-button type="primary" @click="saveOrUpdateChimney">保存</el-button>
						</div>
					</div>
				</el-tab-pane>

				<el-tab-pane label="排放污染物" name="three">
					<pollutionManage v-if="activeName == 'three'" ref="pollutionManage" :outletId="editData.id"
						:editData="editData" @addSuccess="getGasOutletBase">
					</pollutionManage>
				</el-tab-pane>

				<el-tab-pane label="废气处置设施和工艺" name="second" v-if="editData.gasOutletApproach == 'ORGANIZED_OUTLET'">
					<gasDefenceManageNew v-if="activeName == 'second'" ref="gasDefenceManageNew" :outletId="editData.id"
						:editData="editData">
					</gasDefenceManageNew>
				</el-tab-pane>

				<el-tab-pane label="工艺图" name="four" v-if="editData.gasOutletApproach == 'ORGANIZED_OUTLET'">
					<gasOutletLineSetting v-if="activeName == 'four'" ref="gasOutletLineSetting" :outletId="editData.id"
						:editData="editData"></gasOutletLineSetting>
				</el-tab-pane>

				<el-tab-pane label="在线监测对接" name="five">
					<div class="bgfff pad10 u-borderRadius8">
						<div class="displayFlexBet" style="margin-bottom: 10px;">
							<div class="color555 font14">监测设备对接</div>
						</div>

						<div style="margin: 0 auto;">
							<el-form-item label="设备唯一标识" prop="mn">
								<el-input v-model="outletMn.mn" style="width: 250px;"></el-input>
							</el-form-item>
							<el-form-item label="设备访问密码" prop="pw">
								<el-input v-model="outletMn.pw" style="width: 250px;"></el-input>
							</el-form-item>
							<el-form-item label="监测类型" prop="monitorType">
								<el-select placeholder="监测类型" v-model="outletMn.monitorType" style="width: 250px;">
									<el-option label="CEMS" value="CEMS" />
									<el-option label="空气微站" value="AIR_SITE" />
									<el-option label="TSP" value="TSP" />
								</el-select>
							</el-form-item>
						</div>

						<div style="margin-left: 170px;">
							<el-button type="primary" style="width: 80px;" @click="updateOutletMn">保存</el-button>
						</div>

						<el-alert title="对接地址:47.97.99.101" type="info" description="端口:9009" class="mt30" style="width:500px"
							:closable="false" />
					</div>

				</el-tab-pane>

				<el-tab-pane label="自行监测" name="six">
					<div class="bgfff pad10 u-borderRadius8">
						<div class="displayFlexBet" style="margin-bottom: 10px;">
							<div class="color555 font14">自行监测</div>
						</div>
						<el-form-item label="自行监测频率" prop="gasOutletNo">
							<el-select v-model="form2.frequency" placeholder="请选择" style="width: 250px;">
								<el-option key="MONTH" label="每月一次" value="MONTH" />
								<el-option key="QUARTER" label="每季度一次" value="QUARTER" />
								<el-option key="HALF_YEAR" label="半年一次" value="HALF_YEAR" />
								<el-option key="YEAR" label="每年一次" value="YEAR" />
							</el-select>
						</el-form-item>

						<el-form-item label="说明" prop="frequencyRemark">
							<el-input v-model="form2.frequencyRemark" type="textarea" placeholder="说明"
								style="width: 250px;"></el-input>
						</el-form-item>


						<div style="margin-left: 170px;">
							<el-button type="primary" style="width: 80px;" @click="updateOutletSurveyFrequency">保存</el-button>
						</div>
					</div>
				</el-tab-pane>

				<el-tab-pane label="在线监测预案" name="seven">
					<div class="bgfff pad10 u-borderRadius8">

						<div style="display:flex" v-for="(item,index) in form3" :key="index">
							<div style="padding-top:5px;width:100px">{{item.pollutionName}}</div>

							<el-form-item label="监测预案" prop="monitorPlan">
								<el-input v-model="item.monitorPlan" type="textarea" placeholder="监测预案"
									style="width: 250px;"></el-input>
							</el-form-item>
						</div>

						<div style="margin-left: 170px;">
							<el-button type="primary" style="width: 80px;" @click="saveMonitorPlan">保存</el-button>
						</div>
					</div>
				</el-tab-pane>


			</el-tabs>

		</el-form>
	</div>
</template>

<script>
	import gasDefenceManageNew from '@/components/wasteGas/gasDefenceManageNew'
	import pollutionManage from '@/components/wasteGas/pollutionManage'
	import gasOutletLineSetting from '@/components/wasteGas/gasOutletLineSetting'
	import VueQr from 'vue-qr'

	let that
	export default {
		name: 'addInfoIndex',
		components: {
			gasDefenceManageNew,
			pollutionManage,
			gasOutletLineSetting,
			VueQr
		},
		data() {
			return {
				activeName: "first",
				visible2: false,
				params: {
					ticketId: '',
				},
				dcsAllRunList: [],
				form: {
					gasOutletName: '',
					gasOutletNo: '',
					useDate: '',
					gasOutletHeight: '', // 排气筒高度（m）
					gasOutletTemperature: '', // 排口温度（℃）
					gasOutletPressure: '', // 压力（kPa）
					defaultOutletTime: '', // 排放时间（小时）
					defaultElectricityConsumption: '', // 耗电量（kPa）
					defaultSmokeVolume: '', // 烟气量 （m3/h）
					gasOutletApproach: 'ORGANIZED_OUTLET',
					outletStd: '',
					outletMn: '',
					outletCode: '',
					outletInstallationId:''
				},

				form2: {
					frequency: 'MONTH',
					frequencyName: '',
					frequencyRemark: '',
				},
				form3: [],
				form4: {
					gasOutletHeight: '',
					gasOutletTemperature: '',
					gasOutletPressure: '',
					defaultSmokeVolume: ''
				},

				outletMn: {
					mn: '',
					pw: '',
					pollutionList: []
				},

				params: {
					"outletId": "", // 排口id
					"workStatus": "", // 运行状态
					"pollutionValueList": [],
					"baseValueList": []
				},

				dataList: [],

				formRules: {
					gasOutletName: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}],
					gasOutletNo: [{
						required: true,
						message: '请输入编码',
						trigger: 'blur'
					}],
					useDate: [{
						required: true,
						message: '请选择启用时间',
						trigger: 'change'
					}],
				},
				editData: '',
				outletId: ''
			}
		},
		created: function() {},
		mounted: function() {
			that = this

			that.outletId = that.getQueryString("outletId")
			that.params.ticketId = that.$store.state.token
			that.getGasOutletBase()
		},
		methods: {

			getEachDscRunList() {
				that.ajax({
					url: '/dcs/parameter/list',
					data: {
						mn: that.form.outletMn,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.dcsAllRunList = result.data
						that.$forceUpdate()
					},
				})
			},

			saveOrUpdateChimney() {
				that.form4.outletId = that.outletId
				that.ajax({
					url: '/gasOutlet/updateGasChimney',
					data: JSON.stringify(that.form4),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.$message.success("保存成功！")
						}
					}
				});
			},

			getGasOutletBase() {
				that.ajax({
					url: '/gasOutlet/getGasOutletBase',
					data: {
						outletId: that.outletId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.editData = result.data
							that.form = that.editData
							that.form4.gasOutletHeight = that.editData.gasOutletHeight
							that.form4.gasOutletPressure = that.editData.gasOutletPressure
							that.form4.gasOutletTemperature = that.editData.gasOutletTemperature
							that.form4.defaultSmokeVolume = that.editData.defaultSmokeVolume
							that.getDataList()
							that.getOutletMn()
							that.getOutletSurveyFrequency()
						}
					},
				})

				that.ajax({
					url: '/gasOutlet/getPollutionMonitorPlanList',
					data: {
						outletId: that.outletId
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.form3 = result.data
						}
					},
				})
			},

			getOutletSurveyFrequency() {
				that.ajax({
					url: '/gasOutlet/getOutletSurveyFrequency',
					data: {
						outletId: that.editData.id,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.form2 = result.data
					},
				})
			},

			getOutletMn() {
				that.ajax({
					url: '/gasOutlet/getOutletMn',
					data: {
						outletId: that.editData.id,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						that.outletMn = result.data
					},
				})
			},

			updateOutletSurveyFrequency() {
				that.ajax({
					url: '/gasOutlet/updateOutletSurveyFrequency',
					data: JSON.stringify(that.form2),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.$message.success("保存成功！")
						}
					}
				});
			},

			saveMonitorPlan() {
				// if (!that.form3.pollutionId) return that.$message.error("请选择污染物")
				// if (!that.form3.monitorPlan) return that.$message.error("请填写预案")
				that.form3.outletId = that.outletId
				that.ajax({
					url: '/gasOutlet/saveMonitorPlan',
					data: JSON.stringify(that.form3),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.$message.success("保存成功！")
						}
					}
				});
			},

			updateOutletPollution() {
				that.ajax({
					url: '/gasOutlet/updateOutletPollution',
					data: JSON.stringify({
						pollutionList: that.outletMn.pollutionList,
						outletId: that.editData.id,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.$message.success("保存成功！")
						}
					}
				});
			},

			updateOutletMn() {
				that.ajax({
					url: '/gasOutlet/updateOutletMn',
					data: JSON.stringify({
						pw: that.outletMn.pw,
						mn: that.outletMn.mn,
						monitorType: that.outletMn.monitorType,
						outletId: that.editData.id,
					}),
					contentType: 'application/json',
					success: function(result) {
						if (result.data) {
							that.$message.success("保存成功！")
						}
					}
				});
			},

			getDataList() {
				that.ajax({
					url: '/gasOutletDefence/getGasDefenceListByOutletId',
					data: {
						outletId: that.editData.id,
					},
					contentType: 'application/x-www-form-urlencoded',
					success: function(result) {
						if (result.data) {
							that.dataList = result.data
						}
					},
				})
			},

			cancle() {
				that.$emit("cancle", true)
			},


			//删除危废
			deleteThis() {
				this.$confirm('此操作将删除此数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.ajax({
						url: '/gasOutlet/deleteGasOutletBase',
						data: {
							gasOutletBaseId: that.editData.id
						},
						contentType: 'application/x-www-form-urlencoded',
						success: function(result) {
							if (result.status && result.data) {
								that.data = that.$options.data()
								that.$forceUpdate()
								that.$emit("deleteSuccess", true)
							}
						}
					})
				})
			},

			saveOrUpdate: function() {
				this.$refs['form'].validate(function(valid) {
					if (valid) {
						that.ajax({
							url: '/gasOutlet/saveOrUpdateGasOutletBase',
							data: JSON.stringify(that.form),
							contentType: 'application/json',
							success: function(result) {
								if (result.status == 1 && result.data) {
									that.data = that.$options.data()
									that.$forceUpdate()
									if (that.form.id) {
										that.$emit("success", that.form.id)
									} else {
										that.$emit("success", result.data)
									}
								} else {}
							}
						});
					}
				});
			},

		}
	}
</script>

<style scoped>
	>>>.el-tabs__nav-scroll {
		background: #fff;
		padding: 0 10px;
		border-radius: 4px;
		border-bottom: unset;
	}

	>>>.el-tabs__nav-wrap::after {
		background-color: #fff !important;
	}

	>>>.el-form-item__label {
		font-size: 14px;
		color: #888;
	}
</style>